<template>
  <div class="wb_reply_tail">
    <el-input v-model="tail.content" :maxlength="300" :rows="5"></el-input>
    <div class="btnWrap">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-checkbox v-model="tail.status" @change="handleChange" :true-label="1" :false-label="0">启用</el-checkbox>
    </div>
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  export default {
    data () {
      return {
        tail: {
          content: '',
          status: 1
        }
      }
    },
    mounted () {
      this.init()
    },
    computed: {
      ...mapState('weiboManage', {
        $tail: state => state.tail
      })
    },
    watch: {
      $tail (obj) {
        this.tail = obj
      }
    },
    methods: {
      ...mapActions('weiboManage', ['getReplyTail', 'setReplyTail', 'setReplyTailStatus']),
      init () {
        const appid = this.$route.params.appid
        this.getReplyTail(appid)
      },
      // 是否启用
      handleChange () {
        const appid = this.$route.params.appid
        this.setReplyTailStatus({
          appid: appid,
          status: this.tail.status
        })
      },
      // 保存
      async handleSave () {
        const appid = this.$route.params.appid
        const res = await this.setReplyTail({
          ...this.tail,
          appid: appid
        })
        if (res.data.code === 1) {
          this.$message.success('保存成功')
        }
      }
    }
  }
</script>
<style lang="scss">
  .wb_reply_tail{
    &{width:600px;}
    .btnWrap{
      &{margin-top:15px;}
      .el-button{margin-right:15px;}
    }
  }
</style>
